<form [formGroup]="roleForm">
    <div class="ui-grid-row">
        <div class="button-item">
            <button pButton type="text" class="ui-button-info" icon="fa fa-plus" label="保存" (click)="saveUpdate()"></button>
            <button pButton type="text" class="ui-button-danger" icon="fa fa-search" label="删除" (click)="delete()"></button>
        </div>
    </div>

    <div class="ui-grid-row" style="height:100%;">
        <div class="ui-g-10">
            <div class="ui-g-6 form-control-row">
                <div class="ui-g-4">标志</div>
                <div class="ui-g-8">
                    <input pInputText type="text" formControlName="roleId" style="width:100%" readonly/>
                </div>
            </div>
            <div class="ui-g-6 form-control-row">
                <div class="ui-g-4">所属机构</div>
                <div class="ui-g-8">
                    <input type="hidden" formControlName="unitId" />
                    <input type="hidden" formControlName="unitCode" />
                    <input pInputText type="text" formControlName="unitName" style="width:100%" readonly/>
                </div>
            </div>
            <div class="ui-g-6 form-control-row">
                <div class="ui-g-4">岗位名称</div>
                <div class="ui-g-8">
                    <input pInputText type="text" formControlName="roleName" style="width:100%" />
                </div>
            </div>
            <input type="hidden" formControlName="roleCode" />
            <div class="ui-g-6 form-control-row">
                <div class="ui-g-4">模板岗位</div>
                <div class="ui-g-8 ui-fluid">
                    <p-toggleButton onLabel="是" offLabel="否" formControlName="templateFlag"></p-toggleButton>
                </div>
            </div>
            <div class="ui-g-6 form-control-row">
                <div class="ui-g-4">创建时间</div>
                <div class="ui-g-8">
                    <input pInputText type="text" formControlName="createTime" style="width:100%" readonly/>
                </div>
            </div>
            <div class="ui-g-6 form-control-row">
                <div class="ui-g-4">排序</div>
                <div class="ui-g-8">
                    <input pInputText type="text" formControlName="displayOrder" style="width:100%" />
                </div>
            </div>
            <div class="ui-g-12 form-control-row">
                <div class="ui-g-2">岗位描述</div>
                <div class="ui-g-10">
                    <textarea pInputTextarea rows="2" formControlName="roleDesc" style="width:100%"></textarea>
                </div>
            </div>
            <div class="ui-g-12 form-control-row">
                <div class="ui-g-2">
                    <div class="ui-g-12">岗位头像</div>
                    <div class="ui-g-12">
                        <div class="role-avatar-icon ripple role-avatar-{{roleItem.roleAvatar}}" mdl-shadow="8"></div>
                    </div>
                </div>
                <div class="ui-g-10">
                    <p-dataGrid [value]="roleAvatarIcons" [rows]="6">
                        <ng-template let-icon pTemplate="item">
                            <div class="ui-grid ui-grid-responsive">
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-12" style="margin-left:calc(50% - 32px);margin-top:10px;">
                                        <div class="role-avatar-icon ripple role-avatar-{{icon}}" mdl-shadow="8"></div>
                                    </div>
                                </div>
                                <div class="ui-grid-row">
                                    <div class="ui-grid-col-12" style="margin-left:calc(50% - 5px);margin-top:-20px;">
                                        <p-radioButton name="roleAvatar" formControlName="roleAvatar" value="{{roleAvatar}}"></p-radioButton>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                    </p-dataGrid>
                </div>
            </div>
        </div>
    </div>
</form>